<!DOCTYPE html>
<html>
    <head>
        <title>Echarts测试</title>
        <meta charset="utf-8">
        <!-- 引入 ECharts 文件 -->
        <link rel="stylesheet" href="static/jquery-ui.min.css">
        <script src="static/echarts.js"></script>
        <script src="static/jquery-3.1.1.min.js"></script>
        <script src="static/jquery-ui.min.js"></script>
    </head>
    <body>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <h1>Echarts测试</h1>
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
            var myChart = echarts.init(document.getElementById('main'));
            myChart.showLoading();
//            获取当前日期
//            var d = new Date();
//            var vYear = d.getFullYear();
//            var vMon = d.getUTCMonth() + 1;
//            var vDay = d.getDate();
// 
//            if (parseInt(vMon) < 10)
//            {
//                vMon = "0" + vMon;
//            }
//            if (parseInt(vDay) < 10)
//            {
//                vDay = "0" + vDay;
//            }
//            $("#selectM  option:selected").text(vMon);
//            current_date = vYear+'_'+vMon+'_'+vDay
//            json_name = 'usercumulate_'+current_date+'.json'
//            document.write(json_name)
            $.get('usercumulate_2017-02-15.json', function (usercumulate_20170215) {
//            $.get(json_name, function (usercumulate_20170215) {
                myChart.hideLoading();

                option = {
                    title: {
                        text: '微信公众号用户总数',
                        subtext: '每日累计用户数（单位：个）',
                        left: 'center' //标题居中 
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            mark: {show: true},
                            dataView: {show: true, readOnly: false}, //  数据视图
                            magicType: {show: true, type: ['line', 'bar']},
                            restore: {show: true}, //  刷新
                            saveAsImage: {show: true}                   //  下载为图片
                        }
                    },
                    calculable: true,
                    legend: {
//                        data: ['Growth', '用户量'],
//                        itemGap: 10
                    },
                    grid: {
                        top: '20%',
                        left: '1%',
                        right: '10%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: usercumulate_20170215.ref_date
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: 'Budget (million USD)',
                            axisLabel: {
                                formatter: function (a) {
                                    a = +a;
                                    return isFinite(a)
                                            ? echarts.format.addCommas(+a / 1000)
                                            : '';
                                }
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            id: 'dataZoomX',
                            type: 'slider',
                            start: 94,
                            end: 100
                        },
                    ],
                    series: [
                        {
                            name: '用户量',
                            type: 'bar',
                            data: usercumulate_20170215.cumulate_user
                        },
                    ]
                };

                myChart.setOption(option);

            });
        </script>    
    </body>
</html>